var layer = layui.layer;
var $ = jQuery = layui.jquery;
var form = layui.form;
var element = layui.element;
var table = layui.table;;
var laydate = layui.laydate;
var enddate = $("#enddate");
var todayAmount = $("#todayAmount");//今日累计
var totalAmount = $("#totalAmount");//总累计

(function ($) {
    var page = {
        //获得行政区
        getXZQ:function(jgData){
            var xzqData =new Array();
            for (var i = 0; i < jgData.length; i++) {
                xzqData[i] = jgData[i]["mc"]
            }
            return xzqData;
        },
        //动态修改右上角数据
        getlJSL:function(jgData){
            var et = {
                lJSL:0,
                dRSL:0
            } ;
            for (var i = 0; i < jgData.length; i++) {
                et.lJSL += jgData[i]["lJSL"];
            }
            for (var i = 0; i < jgData.length; i++) {
                et.dRSL += jgData[i]["dRSL"]==null?0:jgData[i]["dRSL"];
            }
            todayAmount.text(et.dRSL==null?0:et.dRSL);
            totalAmount.text(et.lJSL);
        },
        //初始化条形图数据
        getTableViewData:function(jgData){
            var TableViewData = {
                a:[],
                b:[],
                c:[],
                d:[],
                e:[],
                f:[]
            };
            for (var i = 0; i < jgData.length; i++) {
                TableViewData.a[i] = jgData[i]["dRSL"]==0?"":jgData[i]["dRSL"];
                TableViewData.b[i] = jgData[i]["lJSL"]==0?"":jgData[i]["lJSL"];
                TableViewData.c[i] = jgData[i]["lJDYZ"]==0?"":jgData[i]["lJDYZ"];
                TableViewData.d[i] = jgData[i]["lJDRZ"]==0?"":jgData[i]["lJDRZ"];
                TableViewData.e[i] = jgData[i]["lJDSZ"]==0?"":jgData[i]["lJDSZ"];
                TableViewData.f[i] = jgData[i]["xzqh"]==0?"":jgData[i]["xzqh"];
            }
            return TableViewData;

        },
        //加载村级条形图
        renderTableViewForC:function(jgData){
            var _this = this;
            var dom = document.getElementById("tableviewforc");
            $("#tableview").hide();
            $("#tableviewforc").show();
            var myChart = echarts.init(dom);
            var option;
            var data=_this.getTableViewData(jgData);
            var colorL=["#fc8452","#9a60b4","#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc" ];
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // Use axis to trigger tooltip
                        type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                },
                width:686,
                height:_this.getHeigh(jgData),
                legend: {
                    data: ['累计第一针人次', '累计第二针人次', '累计第三针人次']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisTick:data.a[0]
                },
                yAxis: {
                    type: 'category',
                    data: _this.getXZQ(jgData)//

                },
                series: [
                    {
                        name: '当日接种人次',
                        type: 'line',
                        symbolSize: 0, // symbol的大小设置为0
                        showSymbol: false, // 不显示symbol
                        lineStyle: {
                            width: 0, // 线宽是0
                            color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
                        },
                        data: data.a
                    },{
                        name: '累计接种人次',
                        type: 'line',
                        symbolSize: 0, // symbol的大小设置为0
                        showSymbol: false, // 不显示symbol
                        lineStyle: {
                            width: 0, // 线宽是0
                            color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
                        },
                        data: data.b
                    },{
                        name: '累计第一针人次',
                        type: 'bar',
                        barWidth:30,
                        // barCategoryGap: '15%',
                        // boundaryGap : true,
                        stack: '总量',
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        itemStyle : {
                            normal : {
                                color : colorL[0]
                            },
                        },
                        data: data.c
                    },{
                        name: '累计第二针人次',
                        type: 'bar',
                        barWidth:30,
                        // barCategoryGap: '15%',
                        // boundaryGap : true,
                        stack: '总量',
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        itemStyle : {
                            normal : {
                                color : colorL[1]
                            },
                        },
                        data: data.d
                    },{
                        name: '累计第三针人次',
                        type: 'bar',
                        barWidth:30,
                        // barCategoryGap: '15%',
                        // boundaryGap : true,
                        stack: '总量',
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        itemStyle : {
                            normal : {
                                color : colorL[3]
                            },
                        },
                        data: data.e
                    },]
            };

            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
            myChart.resize();

        },
        //初始化条状图
        renderTableView:function(jgData){
            var _this = this;
            var dom = document.getElementById("tableview");
            var myChart = echarts.init(dom);
            var option;
            var data=_this.getTableViewData(jgData);
            var colorL=["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc" ];
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // Use axis to trigger tooltip
                        type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                },
                width:686,
                height:_this.getHeigh(jgData),
                legend: {
                    data: [  '累计第一针人次', '累计第二针人次', '累计第三针人次']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',

                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisTick:data.a[0]

                },
                yAxis: {
                    type: 'category',
                    data: _this.getXZQ(jgData),//
                    axisLabel: {
                        show: true,
                        textStyle: {
                            fontSize: 15
                        }
                    }
                },
                series: [
                    {
                        name: '当日接种人次',
                        type: 'line',
                        symbolSize: 0, // symbol的大小设置为0
                        showSymbol: false, // 不显示symbol
                        lineStyle: {
                            width: 0, // 线宽是0
                            color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
                        },
                        data: data.b
                    },{
                        name: '累计接种人次',
                        type: 'line',
                        symbolSize: 0, // symbol的大小设置为0
                        showSymbol: false, // 不显示symbol
                        lineStyle: {
                            width: 0, // 线宽是0
                            color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
                        },
                        data: data.a
                    },{
                        name: '累计第一针人次',
                        type: 'bar',
                        // barCategoryGap: '15%',
                        // boundaryGap : true,
                        stack: '总量',
                        barWidth:30,
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        itemStyle : {
                            normal : {
                                color : colorL[2]
                            },
                        },barCategoryGap:'20%',
                        data: data.c
                    },{
                        name: '累计第二针人次',
                        type: 'bar',
                        barWidth:30,
                        // barCategoryGap: '15%',
                        // boundaryGap : true,
                        stack: '总量',
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        itemStyle : {
                            normal : {
                                color : colorL[3]
                            },
                        },barCategoryGap:'20%',
                        data: data.d
                    },{
                        name: '累计第三针人次',
                        type: 'bar',
                        barWidth:30,
                        barCategoryGap:'20%',
                        // barCategoryGap: '15%',
                        // boundaryGap : true,
                        stack: '总量',
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        itemStyle : {
                            normal : {
                                color : colorL[4]
                            },
                        },
                        data: data.e
                    },

                ]
            };

            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
            myChart.resize();
        },
        getHeigh:function(jgData){

            var heigh  = jgData.length*60;
            return heigh;
        },
        //获得map鼠标悬浮数据
        preHandleData: function (jgData) {
            for (var i = 0; i < jgData.length; i++) {
                var et = jgData[i];
                if (et["lJSL"] == null) {
                    et["lJSL"] = 0;
                } else {
                    et["lJSL"] = parseInt(et["lJSL"]);
                }
                if (et["dRSL"] == null) {
                    et["dRSL"] = 0;
                } else {
                    et["dRSL"] = parseInt(et["dRSL"]);
                }
                if (et["lJDYZ"] == null) {
                    et["lJDYZ"] = 0.00;
                } else {
                    et["lJDYZ"] = parseFloat(et["lJDYZ"]);
                }
                if (et["lJDRZ"] == null) {
                    et["lJDRZ"] = 0.00;
                } else {
                    et["lJDRZ"] = parseFloat(et["lJDRZ"]);
                }
                if (et["lJDSZ"] == null) {
                    et["lJDSZ"] = 0.00;
                } else {
                    et["lJDSZ"] = parseFloat(et["lJDSZ"]);
                }
                jgData[i]["value"] = et["dRSL"];
            }
            return jgData;
        },
        getValueByKey: function (list, key) {
            var arr = [];
            for (var i = 0; i < list.length; i++) {
                arr.push(parseFloat(list[i][key]));
            }
            return arr;
        },

        //动态获取热力的上下限
        maxMin: function (arr) {
            var length = arr.length;
            var minv = Number.MAX_VALUE;
            var maxv = Number.MIN_VALUE;

            if (length != 0) {
                for (var index = 0; index < length; index++) {
                    if (minv > arr[index]) {
                        minv = arr[index]
                    }
                    if (maxv < arr[index]) {
                        maxv = arr[index]
                    }
                }
            }
            return {
                max: maxv,
                min: minv
            };
        },
        //map 右下角工具区
        createVisualMap:function(tableData){
            var mx = this.maxMin(this.getValueByKey(tableData, 'value'))
            var min = tableData.length>0?mx["min"]:0;
            var max = tableData.length>0?mx["max"]:0;
            var visualMap = {
                min: min,
                max: max,
                text: ['高', '低'],
                realtime: false,
                left: 'right',
                calculable: true,
                show: false,
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered']
                }
            }
            return visualMap;
        },
        //初始化地图
        renderMap:function(tableData){
            var _this = this;
            tableData = _this.preHandleData(tableData);
            var dom = document.getElementById("map");
            var myChart = echarts.init(dom);
            var option;
            myChart.showLoading();
            $.get('/js/mapcx.json', function (geoJson) {
                myChart.hideLoading();
                echarts.registerMap('changxing', geoJson);
                myChart.setOption(option = {

                    tooltip: {
                        trigger: 'item',
                        formatter : function (params) {
                            var list = [];
                            list.push(params.name+"接种情况");
                            if (params.data&&params.data.value >= 0){
                                list.push("当日接种人次：" + params.data.dRSL);
                                list.push("累计接种人次：" + params.data.lJSL);
                                list.push("累计第一针人次：" + params.data.lJDYZ);
                                list.push("累计第二针人次：" + params.data.lJDRZ);
                                list.push("累计第三针人次：" + params.data.lJDSZ);
                            } else {
                                list.push("当日接种人次：无" );
                                list.push("累计接种人次：无");
                                list.push("累计第一针人次：无" );
                                list.push("累计第二针人次：无" );
                                list.push("累计第三针人次：无" );
                            }
                            return list.join("<br>");
                        }
                    },

                    visualMap:  _this.createVisualMap(tableData),
                    series: [
                        {
                            name: '长兴新冠疫苗接种情况展现',
                            type: 'map',
                            mapType: 'changxing', // 自定义扩展图表类型
                            roam: true,
                            zoom: 1.2,

                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        color: '#666',//文字颜色
                                        fontSize: 12      //文字大小
                                    }
                                    // 地图城市名文字的颜色
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        color: '#000'
                                    }

                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: '#333',//区域边框色
                                    areaColor: '#fff',//区域背景色
                                },
                                emphasis: {
                                    color: '#eee',
                                }
                            },
                            data: _this.getMapJsonArea(geoJson,tableData)
                        }
                    ]
                });
            });
            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
        },
        //获得map Json
        getMapJsonArea:function(mapData,jgData){

            var mapDataObject = {};
            if (mapData != null) {
                var features = mapData["features"];
                if (features != null && features.length > 0) {
                    var item, fitem;
                    for (var i = 0; i < features.length; i++) {
                        fitem = features[i];
                        item = fitem["properties"];
                        mapDataObject[item["name"]] = item["name"];
                    }
                }
            }
            if(jgData.length==0){
                return jgData;
            }
            var et;
            var bool = false;
            for (var key in mapDataObject) {
                bool = false;
                for (var j = (jgData.length - 1); j >= 0; j--) {
                    et = jgData[j];
                    if (et["mc"]&&et["mc"].indexOf(key) >= 0) {
                        et["name"] = key;
                        et["fullname"] = key;
                        bool = true;
                        jgData[j] = et;
                        break;
                    }
                }
            }
            for (var j = (jgData.length - 1); j >= 0; j--) {
                et = jgData[j];
                if (!et["name"]) {
                    jgData.splice(j, 1);
                }
            }
            return jgData;

        },
        //初始化接种日期 并赋值当天日期
        initDate:function(){

            laydate.render({
                elem: "#enddate",
                trigger: 'click',
                value: new Date()
            });
        },
        renderTable : function(data){
            table.render({
                // 渲染表格
                data: data,
                elem: '#vsTable', // 表格id
                // toolbar: '#toolbar',
                even:true,
                limit: Number.MAX_VALUE,
                cols: [
                    [
                        {type:'numbers', title: '序号',align:'center'}
                        ,{field: 'mc', title: '所属辖区',align:'center',}
                        ,{field: 'dRSL', title: '登记数量',align:'center'}
                        ,{field: 'lJSL', title: '累计数量',align:'center'}
                        ,{field: 'lJDYZ', title: '第一针',align:'center'}
                        ,{field: 'lJDRZ', title: '第二针',align:'center'}
                        ,{field: 'lJDSZ', title: '第三针',align:'center'}
                    ]
                ]
            });
        },

        //初始化map 条形图 每日
        getPageInfo:function(){
            var _this = this;
            var exportParams = {
                enddate: enddate.val()
            };

            CoreUtil.sendPost("/vaccination/statisticslist", exportParams, function (res) {
                _this.renderMap(res.data);//初始化地图
                _this.getlJSL(res.data);//得到累计数量
                $("#tableview").height(res.data.length*60+ res.data.length*3.5);
                _this.renderTableView(res.data);

            });
        },
        //Layui初始化
        initLayui: function () {
            var _this = this;
            _this.layform = layui.form;
            _this.laytable = layui.table;
            _this.laydate = layui.laydate;
        },
        //页面初始化
        initPage: function () {
            var _this = this;
            _this.initLayui();//初始化layui
            _this.initDate();
            _this.getPageInfo();
            $("#searchbydate").on('click', function (params) {
                $("#tableview").show();
                $("#tableviewforc").hide();
                _this.getPageInfo();
            });
            var dom = document.getElementById("tableview");
            var myChart = echarts.init(dom);
            var domforc = document.getElementById("tableviewforc");
            var myChartforc = echarts.init(domforc);
            myChartforc.on('click', function () {
                $("#tableview").show();
                $("#tableviewforc").hide();
            });
            myChart.on('click', function (params) {
                console.log("==="+JSON.stringify(params.name))
                var exportParams = {
                    xzqh: params.name,
                    enddate: enddate.val()
                };
                CoreUtil.sendPost("/vaccination/villagelist", exportParams, function (res) {
                    $("#tableviewforc").height(res.data.length*60+ res.data.length*3.5);
                    _this.renderTableViewForC(res.data);

                });

            })
        }
    }
    $.page = page;
})(jQuery);

layui.config({
    base: '/layui-ext/'
}).use(['table','laydate','layer','jquery'], function () {
    $.page.initPage();
});
